<template>
  <div class="movie">
    <h1>Movie</h1>
    <h3>Count组件中的num值是{{num}}</h3>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
name:"Movie",
mounted(){
    // mapState的写法1
    /* //mapState辅助函数可以帮我们生成一个对象(其实就是计算数据的对象,我们需要什么,直接传值即可)
    const re = mapState({
      num: "num",
    });
    console.log("re", re);
    //调用对象中的num方法,可以得到state中的值,所以num其实就是计算属性
    console.log(re.num.call(this)); //0 */
    //mapState的写法2
    /* const re = mapState(["num"]); //数组写法,代表去仓库要的值是num,我们计算属性的名字也是num
    console.log(re);
    console.log(re.num.call(this)); */
  },
  /* computed: {
    num() {
      return this.$store.state.num;
    },
  }, */
  //mapstate的写法1
  /* computed: mapState({
    num: "num",
  }), */
  //mapstate的写法2
  // computed: mapState(["num"]),

 //如果我们当前组件有自己的计算属性,还要额外的添加计算属性,我们可以
computed:{
  ...mapState(["num"])
}
}
</script>

<style scoped>
.movie{
    background: yellowgreen;
}
</style>